<template>
  <el-drawer
    :visible.sync="drawerVisible"
    :wrapper-closable="true"
    :close-on-press-escape="false"
    :with-header="false"
    :size="1000"
    append-to-body
    show-close
    @close="handleClose"
  >
    <div v-if="flag" class="create-page-dialog">
      <i class="close-btn el-icon-close" @click="handleClose"/>
      <div class="print-btn" @click="printData">console</div>
      <CreateApproval ref="previewCreateApproval" is-preview />
    </div>
  </el-drawer>
</template>

<script>
import CreateApproval from '@/views/approvalModule/approvalList/create';
import Title from '@/components/Title';

export default {
  title: 'FormMakePreview',
  components: { CreateApproval, Title },
  props: {},
  data() {
    return {
      drawerVisible: false,
      flag: false,
      formOptions: null
    };
  },
  methods: {
    open(formOptions) {
      this.flag = true;
      this.drawerVisible = true;
      this.$nextTick(() => {
        this.$refs.previewCreateApproval.setPreviewOption(formOptions);
      });
      this.formOptions = formOptions;
    },
    handleClose() {
      this.drawerVisible = false;
      setTimeout(() => {
        this.flag = false;
      }, 500);
    },
    printData() {
      console.log(this.formOptions);
    }
  }
};
</script>

<style lang="scss" scoped>
.create-page-dialog {
  position: relative;
  &::v-deep  {
    .pagination-flex {
      position: absolute;
      width: 100% !important;
    }

  }
  .close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    z-index: 10;
  }
  .print-btn {
    position: absolute;
    right: 38px;
    top: 10px;
    font-size: 12px;
    cursor: pointer;
    z-index: 10;
    color: #fff;
  }
}
::v-deep .el-drawer__body {
  overflow: auto !important;
}
</style>
